<template>
	<view class="makeMoney">
		<image class="image" src="/static/img/index/22.png" mode="widthFix"></image>
		<!-- 	<view class="top">
			<image class="left" src="/static/img/index/24.png" mode="widthFix"></image>
			<image class="right" src="/static/img/index/26.png" mode="widthFix"></image>
		</view> -->
		<NavBar>
			<template #right>
				<image v-if="data.bool && data.shopDetails.storeState.value == 'OPEN'" @tap="scanCode" class="topRight"
					src="/static/img/index/78.png" mode="widthFix"></image>
			</template>
		</NavBar>
		<view class="top1">
			<view class="left">
				<image class="image"
					:src="data.shopDetails.storeInfoDetail?data.httpUrl+'/app/file/viewFile?fileId='+data.shopDetails.storeInfoDetail.logFileId:'/static/img/index/35.png'"
					mode="aspectFill"></image>
			</view>
			<view class="right">
				<text class="rightTop">{{data.bool?data.shopDetails.storeInfoDetail.storeName:'暂无店铺'}}</text>
				<view class="rightBot"
					@tap="data.bool && data.shopDetails.storeState.value == 'OPEN' ?navTo1('/pages/shopInfo/index'):''">
					<text
						class="rightBotText">{{data.bool?data.shopDetails.storeState.name+' '+data.shopDetails.storeInfoDetail.workDays+' '+data.shopDetails.storeInfoDetail.workTime:'请添加后查看'}}</text>
					<image class="rightBotImg" src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bot">
			<view class=""
				v-if="data.shopDetails.storeInfoDetail　&& data.shopDetails.storeState.name != '待审核' && data.shopDetails.storeState.value != 'FREEZE'">
				<view class="botTop">
					<view class="botTop_1">
						<view class="botTop_1_view">
							<text class="botTop_1_view_text">资</text>
							<image class="botTop_1_view_img" src="/static/img/index/23.png" mode="widthFix"></image>
						</view>
						<view class="botTop_1_view">
							<text class="botTop_1_view_text">信</text>
							<text class="botTop_1_view_text1">{{data.shopDetails.storeInfoDetail.credit}}</text>
						</view>
						<view class="botTop_1_view">
							<text class="botTop_1_view_text">保</text>
							<text class="botTop_1_view_text2">{{data.shopDetails.storeInfoDetail.bondAmount}}</text>
						</view>
					</view>
					<view class="shop">
						<text class="shopText">店铺数据</text>
						<view class="shopList">
							<view class="shopItem">
								<text class="shopItem_text">今日订单数</text>
								<text class="shopItem_text1">{{data.shopDetails.storeStatics.todayOrderCount}}</text>
							</view>
							<view class="shopItem">
								<text class="shopItem_text">今日成交额</text>
								<text class="shopItem_text1">￥{{data.shopDetails.storeStatics.todayTradeAmount}}</text>
							</view>
							<view class="shopItem">
								<text class="shopItem_text">本月订单数</text>
								<text class="shopItem_text1">￥{{data.shopDetails.storeStatics.currentMonthCount}}</text>
							</view>
							<view class="shopItem">
								<text class="shopItem_text">本月成交额</text>
								<text
									class="shopItem_text1">￥{{data.shopDetails.storeStatics.currentMonthTradeAmount}}</text>
							</view>
						</view>
					</view>
					<view class="botTop_2">
						<view class="botTop_2_view" @tap="navTo1('/pages/orderList/index?state=WAIT_PAY')">
							<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.waitPayCount}}</text>
							<text class="botTop_2_view_text1">待付款</text>
						</view>
						<view class="botTop_2_view" @tap="navTo1('/pages/orderList/index?state=WAIT_SEND')">
							<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.waitDeliverCount}}</text>
							<text class="botTop_2_view_text1">待发货</text>
						</view>
						<view class="botTop_2_view" @tap="navTo1('/pages/evaluationManagement/index')">
							<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.commentCount}}</text>
							<text class="botTop_2_view_text1">评价</text>
						</view>
						<view class="botTop_2_view" @tap="navTo1('/pages/sellerAfterSalesList/index')">
							<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.refundCount}}</text>
							<text class="botTop_2_view_text1">退货/售后</text>
						</view>
					</view>
				</view>
				<view class="freeShipping" @tap="handeClick1">
					<text class="topText">促销联盟，销量不愁</text>
					<view >
						商家活动报名入口
						<image class="rightBotImg" src="/static/img/freeShipping/1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="application">
					<text class="application_text">我的应用</text>
					<view class="applicationView">
						<view @tap="navTo1(item.url)" :style="(index+1)%4 == 0?'margin-right:0;':''"
							class="applicationItem" v-for="(item,index) in data.applicationArr" :key="index">
							<image class="image" :src="item.src" mode="widthFix"></image>
							<text class="text">{{item.title}}</text>
						</view>
					</view>
				</view>

			</view>
			<view class="daishenhe" v-else-if="data.shopDetails.storeState.name == '待审核'">
				<image class="image" src="/static/img/index/117.png" mode="widthFix"></image>
				<text class="zanwuText">店铺审核中</text>
				<text class="zanwuText1">还请您耐心等待。</text>
			</view>
			<view class="daishenhe" v-else-if="data.shopDetails.storeState.value == 'FREEZE'">
				<image class="image" src="/static/img/index/117.png" mode="widthFix"></image>
				<text class="zanwuText">店铺整顿中</text>
				<text class="zanwuText1">还请您耐心等待。</text>
			</view>
			<view class="zanwu" v-else>
				<image class="image" src="/static/img/index/36.png" mode="widthFix"></image>
				<text class="zanwuText">暂无店铺</text>
				<text class="zanwuText1">尊敬的用户，您还没有开通店铺哦</text>
				<view class="zanwuBut" @click="handeClick">
					<text class="zanwuButText">去开通</text>
				</view>
			</view>
		</view>
		<!-- <PromptBox/> -->
	</view>
</template>

<script lang="ts" setup>
	import NavBar from '@/components/navBar.vue'
	import PromptBox from '@/components/promptBox.vue'
	import { myStoreDetail, verifyOrder } from '@/utils/api/shop'
	import { authenticationFlag } from '@/utils/api/index'
	import { reactive } from 'vue'
	import { onShow } from '@dcloudio/uni-app'

	const data = reactive<any>({
		bool: false,
		authenticationFlag: '',
		httpUrl: getApp().globalData.baseUrl,
		applicationArr: [
			{ title: '商品管理', src: '/static/img/index/33.png', url: '/pages/commodityManagement/index' },
			{ title: '认证中心', src: '/static/img/index/32.png', url: '/pages/authenticationCenter/index' },
			{ title: '保证金', src: '/static/img/index/27.png', url: '/pages/bond/index' },
			{ title: '消息中心', src: '/static/img/index/30.png', url: 'im' },
			{ title: '订单管理', src: '/static/img/index/29.png', url: '/pages/orderList/index' },
			{ title: '评价管理', src: '/static/img/index/31.png', url: '/pages/evaluationManagement/index' },
			{ title: '退款售后', src: '/static/img/index/34.png', url: '/pages/sellerAfterSalesList/index' },
			{ title: '店铺管理', src: '/static/img/index/28.png', url: '/pages/shopInfo/index' },
		],
		shopDetails: {}
	})
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	const handeClick1 = () => {
		navTo1('/pages/marketingActivities/index')
		
	}
	const navTo1 = (url : string) => {
		if (url == 'im') {
			uni.switchTab({
				url: '/pages/TUIKit/components/TUIConversation/index'
			})
			return;
		}
		uni.navigateTo({
			url
		})
	}

	const handeClick = () => {
		if (data.authenticationFlag == 'N') {
			navTo('/pages/identityAuthentication/index')
			return;
		}
		navTo('/pages/opeAStore/index')
	}
	const scanCode = () => {
		uni.scanCode({
			success: function (res) {
				verifyOrder({ data: { verifyCode: res.result } }).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '核销成功！',
							icon: 'none'
						})
					}
				})
			}
		});
	}
	onShow(() => {
		authenticationFlag().then((res) => {
			data.authenticationFlag = res.data;
		})
		myStoreDetail().then((res) => {
			if (res.data.storeInfoDetail) {
				data.bool = true;
			}
			if (res.data.storeInfoDetail && res.data.storeInfoDetail.bondAmount >= 1000000) {
				res.data.storeInfoDetail.bondAmount = ((res.data.storeInfoDetail.bondAmount / 10000 + '').split('.')[0]) + '万'
			}
			data.shopDetails = res.data;
			if (!data.isLoad && res.data.storeState.value != 'FREEZE') {
				if (res.data.openBondDialog == 1) {
					uni.showModal({
						title: '提示',
						content: '保证金未缴纳，每日交易限额500，缴纳保证金即可解除限制！',
						success: (e) => {
							// if (e.confirm) {
							// 	uni.navigateTo({
							// 		url: '/pages/bond/index'
							// 	})
							// }
						}
					})
				}
			}
			data.isLoad = true;

		})
	})
</script>

<style lang="scss">
	:deep(.navBarTop) {
		background: transparent !important;
	}

	.freeShipping {
		height: 160rpx;
		border-radius: 24rpx;
		background: url('/static/img/freeShipping/2.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		justify-content: center;
		margin-bottom: 20rpx;

		.topText {
			font-family: 'MyFont1';
			font-size: 46rpx;
			color: #fff;

			text {
				font-family: 'MyFont1';
			}
		}

		>view {
			width: fit-content;
			display: flex;
			align-items: center;
			padding: 7rpx 16rpx;
			margin-top: 10rpx;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, .2);
			font-size: 24rpx;
			color: #fff;

			image {
				width: 30rpx;
				margin-left: 10rpx;
			}
		}
	}

	.makeMoney {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;

		.daishenhe {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 100rpx;

			text:nth-of-type(1) {
				color: #FF8C00;
				font-size: 36rpx;
				margin: 48rpx 0 4rpx 0;
			}

			text:nth-of-type(2) {
				color: #8C8C8C;
				font-size: 24rpx;
			}

			image {
				width: 240rpx;
			}
		}

		.zanwu {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 200rpx;

			.image {
				width: 240rpx;
				margin-bottom: 48rpx;
			}

			.zanwuText {
				color: #262626;
				font-size: 36rpx;
			}

			.zanwuText1 {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: #8C8C8C;
			}

			.zanwuBut {
				width: 453rpx;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				border-radius: 108rpx;
				background: #6B64D3;
			}

			.zanwuButText {
				color: #fff;
				font-size: 36rpx;
			}
		}

		>.bot {
			position: relative;
			z-index: 9;
			height: 0;
			overflow: auto;
			flex: 1;
			background: #fff;
			border-radius: 36rpx;
			padding: 32rpx 36rpx;

			.botTop {
				.botTop_1 {
					padding: 10rpx 67rpx;
					border-radius: 12rpx;
					background: #F4F6FA;
					justify-content: space-between;
					display: flex;
					flex-direction: row;
					align-items: center;

					.botTop_1_view {
						display: flex;
						flex-direction: row;
						align-items: center;

						.botTop_1_view_img {
							width: 90rpx;
						}

						.botTop_1_view_text {
							font-size: 24rpx;
							color: #8C8C8C;
							margin-right: 8rpx;
						}

						.botTop_1_view_text1 {
							font-size: 36rpx;
							color: #4080FF;
						}

						.botTop_1_view_text2 {
							font-size: 36rpx;
							color: #6AC922;
						}
					}
				}

				.botTop_2 {
					padding: 0 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 40rpx 0 60rpx 0;

					.botTop_2_view {
						display: flex;
						align-items: center;
						flex-direction: column;

						.botTop_2_view_text {
							font-size: 42rpx;
							color: #262626;
						}

						.botTop_2_view_text1 {
							color: #8C8C8C;
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}
				}
			}

			.application {
				.application_text {
					color: #262626;
					font-size: 28rpx;
					margin-bottom: 12rpx;
				}

				.applicationView {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: flex-start;

					.applicationItem {
						width: 165rpx;
						display: flex;
						align-items: center;
						margin-top: 20rpx;
						flex-direction: column;

						.image {
							width: 72rpx;
						}

						.text {
							font-size: 24rpx;
							color: #262626;
							margin-top: 10rpx;
						}
					}

				}
			}

			.shop {
				margin-top: 60rpx;

				.shopText {
					color: #262626;
					font-size: 28rpx;
					margin-bottom: 12rpx;
				}

				.shopList {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					justify-content: space-between;

					.shopItem {
						width: 327rpx;
						margin-top: 26rpx;
						height: 130rpx;
						display: flex;
						justify-content: center;
						padding: 0 20rpx;
						box-sizing: border-box;
						background: #F4F6FA;
						border-radius: 16rpx;
						flex-direction: column;

						.shopItem_text {
							font-size: 24rpx;
							color: #8C8C8C;
							margin-bottom: 15rpx;
						}

						.shopItem_text1 {
							font-size: 36rpx;
							color: #262626;
						}
					}
				}
			}
		}

		>.image {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.topRight {
			width: 35rpx;
		}

		>.top1 {
			display: flex;
			position: relative;
			z-index: 9;
			flex-direction: row;
			align-items: center;
			padding: 0 42rpx;
			margin: 44rpx 0 38rpx 0;

			.left {
				width: 128rpx;
				height: 128rpx;
				border-radius: 128rpx;
				background: #ccc;
				margin-right: 24rpx;

				.image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						overflow: 50%;
					}
				}
			}

			.right {
				.rightTop {
					font-size: 36rpx;
					color: #262626;
				}

				.rightBot {
					display: flex;
					flex-direction: row;
					margin-top: 12rpx;
					padding: 4rpx 16rpx;
					align-items: center;
					background: rgba(255, 255, 255, 0.60);
					border-radius: 28rpx;

					.rightBotImg {
						width: 18rpx;
						margin-left: 7rpx;
					}

					.rightBotText {
						font-size: 22rpx;
						color: #262626;
					}
				}
			}
		}
	}
</style>